/**
    商品列表页面
*/
<template>
    <div>

        <!--查询条件-->
        <div style="text-align:left;">
            <router-link to="/product/add" style="margin-right:10px;"> 
                <el-button type="success" size="medium">添加</el-button>
            </router-link>
            <el-button type="danger" size="medium">批量删除</el-button>
            <el-button type="warning" size="medium">批量下架</el-button>
            
        </div>


        <!--数据列表-->
        <div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="图片" width="120">
                    <template >
                        <img src="http://localhost:5164/20230921/cb9ef24b06634da9907b60231cd04021.png" style="width:30px;"/>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称"></el-table-column>
                <el-table-column prop="spec" label="规格" width="220"></el-table-column>
                <el-table-column prop="price" label="价格" width="120">
                    <template slot-scope="scope">
                        <span style="color:red;">￥{{ scope.row.price.toFixed(2) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="stock" label="库存" width="120"></el-table-column>
                <el-table-column prop="saleNumber" label="销量" width="120"></el-table-column>
                <el-table-column prop="name" label="是否上架" width="120">
                    <template slot-scope="scope">
                        {{ handleFlag(scope.row.flag, 0) }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="是否推荐" width="120">
                    <template slot-scope="scope">
                        {{ handleFlag(scope.row.flag, 1) }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="是否新品" width="120">
                    <template slot-scope="scope">
                        {{ handleFlag(scope.row.flag, 2) }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="是否特价" width="120">
                    <template slot-scope="scope">
                        {{ handleFlag(scope.row.flag, 3) }}
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="操作" width="100">
                    <template>
                        <i class="el-icon-edit" title="编辑"></i>
                        &nbsp;
                        <i class="el-icon-delete" title="删除"></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--数据分页-->
        <div></div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [
                { id: '1', name: '苹果15 pro', spec: '{"颜色":"银色","内存":"1TB"}', price: 9999.00, stock: 10000, saleNumber: 9999, flag: '11000000' },
                { id: '2', name: '苹果15 pro', spec: '{"颜色":"银色","内存":"512G"}', price: 8999.00, stock: 10000, saleNumber: 9999, flag: '11000000' },
                { id: '3', name: '苹果15 pro', spec: '{"颜色":"银色","内存":"256G"}', price: 7999.00, stock: 10000, saleNumber: 9999, flag: '11010000' },
                { id: '4', name: '苹果15 pro', spec: '{"颜色":"银色","内存":"128G"}', price: 6999.00, stock: 10000, saleNumber: 9999, flag: '11010000' },
                { id: '5', name: '华为15 pro', spec: '{"颜色":"银色","内存":"1TB"}', price: 8999.00, stock: 10000, saleNumber: 9999, flag: '11010000' },
                { id: '6', name: '华为15 pro', spec: '{"颜色":"银色","内存":"512G"}', price: 7999.00, stock: 10000, saleNumber: 9999, flag: '11100000' },
            ],
            multipleSelection: []
        }
    },

    mounted() {
    },

    methods: {

        //处理flag标记：value是标记的值，index是指第几分
        handleFlag(value, index) {
            var c = Array.from(value)  //将字符串转为字符数组
            if (c[index] == '1') {  //根据传进来的索引取值并判断
                return '是'
            } else {
                return '否'
            }
        },
        //表格选中事件
        handleSelectionChange(val) {
            this.multipleSelection = val;
        }
    }
}
</script>